vlwkaos' digital garden

Web Vitals - First Input Delay

개요

First Input Delay 지표는 처음 유저가 뭔가 상호작용할 수 있는 버튼 등을 조작했을 때 그 상호작용에 의해 뭔가 반응이 일어나기 까지의 시간을 측정한다.

FID가 짧을 수록 사용자는 현재 웹사이트가 사용할 만하다고 느낀다.

FID가 100ms 이내여야 좋은 사용자 경험이라 할 수 있다.

어떻게 측정하나

클릭했을 떄의 Event가 메인 쓰레드에서 실제 처리되기 까지의 시간을 측정한다.

주의할 점 한가지는 FID는 이벤트를 실행하라 명령한 시점에 실제 실행까지 걸리는 지연시간을 측정하기 때문에 비동기 처리를 하면 FID를 인위적으로 낮출 수 있지만 실제로는 더 안좋은 사용자 경험을 줄 수 있다. Async - Event Loop 참조

아래 도표 예시를 보자

Example page load trace with FCP, TTI, and FID

  • FCP가 발생하고 웹 사이트가 계속해서 뭔가 로드하고 렌더한다.
  • 버튼이 렌더 되었기 때문에 유저는 버튼을 클릭한다.
  • 하지만 리소스 로딩등으로 메인 쓰레드는 계속 점거되고 있다. 클릭으로 발생해야할 이벤트는 후순위로 미뤄진다.
  • 모든 로딩이 끝난 뒤에야 클릭했던 이벤트가 실행된다.

만약 메인 쓰레드가 쉬고 있을 때 버튼을 눌렀다면 유저가 클릭한 이벤트가 바로 실행됐을 수도 있다. 이는 FID지표를 살펴볼 때 단순히 시간을 볼게 아니라 시간에 따른 FID의 분포를 보는 것이 중요하다는 것을 알려준다.

HTML element에 이벤트 리스너가 없더라도 FID를 측정할 수 있다. <select>, <input> 과 같은 element가 작동하기 위해서는 메인쓰레드가 쉬고있어야 하기 때문이다.

왜 first input를 기준으로 삼았나?

모든 지연시간은 사용자 경험에 좋지 않지만 FID를 지표로 삼은 이유는?

  • FID는 웹사이트의 첫인상을 결정한다.
  • 요즘 대부분의 웹사이트가 로딩중 상호작용에 문제가 있다.
  • FID 를 개선하기 위한 방법은 페이지가 다 로딩 된후에 최적화하는 방법과는 상이하다. 이를 구분함으로써 웹 성능 개선의 방향성을 확실히할 수 있다.

개선 방법

참조

Referred in

Web Vitals - First Input Delay